const baseUrl = 'https://api.apiopen.top/getJoke'
const errorImg = 'https://www.joyweb.cn/joyblog/content/uploadfile/201901/d191f8610cae4472d1dd4cc74831d89d20190114144940.png'

let container = $('.container')
let loading = $('.loading')
let footer = $('.footer')
let showAlert = $('#showAlert')
let allLayer = $('#allLayer')
let vedioClose = $('#vedioClose')

let scroolFlag = true
let thisBtnIndex = 0
let dataObj = {
    page: 1,
    count: 10,
    type: 'text'
}
function showAlertFn(){
    showAlert.fadeIn()
    allLayer.fadeIn()
}
function hideAlert(){
    showAlert.children().children().attr('src','')
    // console.log(showAlert.children().trigger)
    showAlert.children().trigger('pause')
    showAlert.fadeOut()
    allLayer.fadeOut()
}
function playVideo(url){
    showAlert.children().children().attr('src',url)
    showAlert.children()[0].load()
}
footer.on('click', function (e) {
    let index = $(e.target).index()
    if (thisBtnIndex == index) return
    thisBtnIndex = index
    $('.container').animate({
        scrollTop: 0
    }, 0)
    container.fadeOut(300, function () {

        $('.item-con').remove()

        if (index == 0) {
            dataObj = {
                page: 1,
                count: 10,
                type: 'text'
            }
        } else if (index == 1) {
            dataObj = {
                page: 1,
                count: 10,
                type: 'image'
            }
        } else {
            dataObj = {
                page: 1,
                count: 10,
                type: 'video'
            }
        }
        $.ajax({
            url: baseUrl,
            type: 'GET',
            data: dataObj
        }).then(res => {
            const {
                code,
                result
            } = res
            if (code == 200) {
                renderMes({
                    fatherDom: container,
                    dataArr: result,
                    type: dataObj.type
                })
                container.fadeIn()
            }
        }).catch(err => {

        })

    })
})

function showLoading() {
    loading.fadeIn('slow')
}

function hideLoading() {
    loading.fadeOut('slow')
}

function typeToStr(type, data) {
    let str = ''
    if (type == 'text') {
        str = `
        <div class="header">
                    <div class="avatar">
                        <img src="${data.header?data.header:errorImg} " alt="头像">
                    </div>
                    <div class="right">
                        <div class="username">${data.name}</div>
                        <div class="time">发表于 ${data.passtime}</div>
                    </div>
        </div>
        <p class="article">
            ${data.text}
        </p>
        <div class="operate">
                    <div class="like btn">喜欢</div>
                    <div class="comment btn">评论</div>
                    <div class="more btn">更多</div>
        </div>
        `
    } else if (type == 'image') {
        str = `
        <div class="header">
                    <div class="avatar">
                        <img src="${data.header?data.header:errorImg}" alt="头像">
                    </div>
                    <div class="right">
                        <div class="username">${data.name}</div>
                        <div class="time">发表于 ${data.passtime}</div>
                    </div>
        </div>
        <p class="image">
                    <img src="${data.images?data.images:errorImg}"  alt="中间图片" title='${data.text}'>
        </p>
        <div class="operate">
                    <div class="like btn">喜欢</div>
                    <div class="comment btn">评论</div>
                    <div class="more btn">更多</div>
        </div>
        `
    } else if (type == 'video') {
        str = `
        <div class="header">
                    <div class="avatar">
                        <img src="${data.header?data.header:errorImg}" alt="头像">
                    </div>
        <div class="right">
                        <div class="username">${data.name}</div>
                        <div class="time">发表于 ${data.passtime}</div>
                    </div>
                </div>
        <div class="video" data-vedioUrl='${data.video}'>
                    <img src="${data.thumbnail?data.thumbnail:errorImg}" alt="视频预览图">
                    <div class='video-layer'>
                        <i class='icon iconfont iconbofang'></i>
                    </div>
                </div>
        <div class="operate">
                    <div class="like btn">喜欢</div>
                    <div class="comment btn">评论</div>
                    <div class="more btn">更多</div>
        </div>
        `
    }
    return str
}

function renderMes({
    fatherDom,
    dataArr,
    type
}) {
    let father = fatherDom
    let con = document.createElement('div')
    $(con).addClass('item-con')
    dataArr.forEach(v => {
        let item = document.createElement('div')
        $(item).addClass('items')
        $(item).html(typeToStr(type, v))
        $(con).append(item)
    })

    // console.log(con) 
    $(father).append(con)
}
$.ajax({
    url: baseUrl,
    type: 'GET',
    data: dataObj
}).then(res => {
    const {
        code,
        result
    } = res
    if (code == 200) {
        renderMes({
            fatherDom: container,
            dataArr: result,
            type: dataObj.type
        })
    }
}).catch(err => {

})

$(container).scroll(function () {
    const {
        scrollTop,
        clientHeight,
        scrollHeight
    } = this
    if ((scrollTop + clientHeight) / scrollHeight > 0.9) {
        if (!scroolFlag) return
        scroolFlag = false
        dataObj.page++
        showLoading()
        setTimeout(() => {
            $.ajax({
                url: baseUrl,
                type: 'GET',
                data: dataObj
            }).then(res => {
                const {
                    code,
                    result
                } = res
                if (code == 200) {
                    renderMes({
                        fatherDom: container,
                        dataArr: result,
                        type: dataObj.type
                    })
                    hideLoading()
                    scroolFlag = true
                }
            }).catch(err => {

            })


        }, 500)
    }
})



container.on('click',function(e){
    if(e.target.className.indexOf('iconbofang')>-1){
        let url = $(e.target.parentNode.parentNode).attr('data-vedioUrl')
        showAlertFn()
        playVideo(url)
    }else if(e.target.className == 'video-layer'){
        let url = $(e.target.parentNode).attr('data-vedioUrl')
        showAlertFn()
        playVideo(url)
    }
    
})
allLayer.on('click',function(){
    
    hideAlert()
})
vedioClose.on('click',function(){
    hideAlert()
})

